<style lang="less">

</style>
<template>
    <div>
        <Drawer :closable="false" placement="right" v-model="drawerVisible" width="50%" :title="drawerTitle">
            <Row>
                <Col>
                <Card :shadow="false">
                    <Row>
                        <Form ref="form" :model="form" :label-width="90" style="position:relative">
                            <FormItem label="活动名称" prop="activityName">
                                <Input v-model="form.activityrecord.activityName" :readonly="readonly" style="width:600px"/>
                            </FormItem>
                            <FormItem label="活动时间" prop="activityTime">
                                <Input v-model="form.activityrecord.activityTime" :readonly="readonly" style="width:600px"/>
                            </FormItem>
                            <FormItem label="活动结束时间" prop="activityendTime">
                                <Input v-model="form.activityrecord.activityendTime" :readonly="readonly" style="width:600px"/>
                            </FormItem>
                            <FormItem label="活动地址" prop="activityAddress">
                                <Input v-model="form.activityrecord.activityAddress" :readonly="readonly" style="width:600px"/>
                            </FormItem>
                            <!--<FormItem label="主题" prop="theme">
                                <Input v-model="form.activityrecord.theme" :readonly="readonly" style="width:600px"/>
                            </FormItem>-->
                            <FormItem label="主办方" prop="sponsor">
                                <Input v-model="form.activityrecord.sponsor" :readonly="readonly" style="width:600px"/>
                            </FormItem>
                            <FormItem label="活动简介" prop="activityIntro">
                                <Input type="textarea" v-model="form.activityrecord.activityIntro" :readonly="readonly" style="width:600px"/>
                            </FormItem>

                            <FormItem label="活动图片" prop="period">
                                <div class="demo-avatar" v-if="form.activityImgs" >
                                    <img  v-for="item in form.activityImgs" style="width: 160px;height: 120px;margin-left: 10px;object-fit: contain;" :src="item" @click="showPic(item)" />
                                </div>
                            </FormItem>
                            <Modal v-model="picVisible" title="图片" draggable>
                                <img :src="fileUrl" alt="无效的图片链接" style="width: 100%;margin: 0 auto;display: block;">
                            </Modal>

                            <!--<FormItem label="增加学时" prop="period">
                                <InputNumber number v-model="form.activityrecord.period" style="width:600px"/>
                            </FormItem>-->
                            <FormItem label="审核结果" prop="sponsor" >
                                <RadioGroup v-model="form.activityrecord.activityType" >
                                    <Radio :label="1" :disabled="disabledSingle">通过</Radio>
                                    <Radio :label="0" :disabled="disabledSingle">拒绝</Radio>
                                </RadioGroup>
                            </FormItem>
                            <Form-item class="br" v-if="!disabledSingle">
                                <Button type="primary" :loading="submitLoading" @click="handelSubmit" style="width:80px">提交</Button>
                                <Button @click="handelCancel">取消</Button>
                            </Form-item>
                            <Spin size="large" fix v-if="loading"></Spin>
                        </Form>
                    </Row>
                </Card>
                </Col>
            </Row>
        </Drawer>
    </div>
</template>
<script>
    import {activityrecordSetStatus, getActivityrecord} from "@/api/bus";
    import uploadInput from "@/views/my-components/flyme/upload-input";
    // 表情包配置 自定义表情可在该js文件中统一修改
    import {sina} from "@/libs/emoji";
    export default {
        name: "activity-drawer",
        components: {
            uploadInput
        },
        data() {
            return {
                disabledSingle: false,
                readonly: true,
                picVisible: false,
                fileUrl: "",
                loading: false, // 表单加载状态
                drawerTitle: "活动审核",
                drawerVisible: false,
                id: "",
                form: {},
                submitLoading: false, // 添加或编辑提交状态
            };
        },
        methods: {
            showDrawer(params) {
                this.id = params.id;
                this.drawerVisible = true;
                this.getData();
            },
            handelSubmit() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        if(this.form.activityrecord.activityType === 0){
                            this.form.activityrecord.period = 0
                        }
                        if(this.form.activityrecord.period < 0){
                            this.$Message.error("请填写正确的学时！");
                            return false;
                        }
                        this.submitLoading = true;
                        // 编辑
                        activityrecordSetStatus(this.form.activityrecord).then(res => {
                            this.submitLoading = false;
                            if (res.status === true) {
                                this.$Message.success("操作成功");
                                this.$parent.getDataList();
                                this.drawerVisible = false;
                            }
                        });
                    }
                });
            },
            showPic(v) {
                this.fileUrl = v;
                this.picVisible = true;
            },
            getData() {
                getActivityrecord(this.id).then(res => {
                    this.submitLoading = false;
                    if (res.status === true) {
                        this.form = res.data
                        if(res.data.activityrecord.activityType === 2 ){
                            this.form.activityrecord.activityType = 1
                        }else{
                            this.disabledSingle = true
                        }
                        console.info(JSON.stringify(this.form.activityrecord));
                    }
                });
            },
            handelCancel() {
                this.drawerVisible = false;
            }
        },
        mounted() {

        },
        watch: {

        }
    };
</script>